<div class="dragular-handle backlog-item-details {{ backlogItemController.backlog_item.status | lowercase }} {{ backlogItemController.backlog_item.color }}"
    ng-class="{ 'moving-to': backlogItemController.backlog_item.moving_to }"
    backlog-item-details="backlogItemController.backlog_item"
    move-to-top="backlogItemController.moveToTopInParent(backlogItemController.backlog_item)"
    move-to-bottom="backlogItemController.moveToBottomInParent(backlogItemController.backlog_item)"
    current-milestone="current_milestone"
></div>

<div class="show-children"
    ng-class="{ hidden: (backlogItemController.backlog_item.children.data.length === 0 && (! backlogItemController.backlog_item.has_children || backlogItemController.backlog_item.children.loaded)) }"
    data-nodrag="true"
>
    <div ng-show="! backlogItemController.backlog_item.children.collapsed" class="children">
        <ul class="backlog-item-children"
            data-backlog-item-id="{{ backlogItemController.backlog_item.id }}"
            data-nodrop="{{ ! canUserMoveCards() }}"
            data-accept="{{ backlogItemController.backlog_item.accepted_types.toString() }}"
        >
            <li ng-repeat="backlog_item in backlogItemController.backlog_item.children.data"
                data-type="{{ backlog_item.trackerId }}"
                class="backlog-item child {{ planning.current_view_class }}"
                ng-show="planning.canShowBacklogItem(backlog_item)"
                ng-class="{ undraggable: ! canUserMoveCards(), selected: backlog_item.selected, multiple: backlog_item.multiple, hidden: backlog_item.hidden, shaking: backlog_item.shaking }"
                data-nodrag="{{ ! canUserMoveCards() }}"
                data-item-id="{{ backlog_item.id }}"
                backlog-item-index="$index"
                backlog-item-select="backlog_item"
            >
                <div class="backlog-item-details dragular-handle-child {{ backlog_item.status | lowercase }} {{ backlog_item.color }}"
                    ng-class="{ 'moving-to': backlog_item.moving_to }"
                    backlog-item-details="backlog_item"
                    move-to-top="backlogItemController.moveToTop(backlog_item)"
                    move-to-bottom="backlogItemController.moveToBottom(backlog_item)"
                ></div>
            </li>
        </ul>

        <div class="loading" ng-if="backlogItemController.backlog_item.loading"></div>
    </div>

    <div
        ng-class="{'show-children-close': ! backlogItemController.backlog_item.children.collapsed}"
        class="show-children-handle"
        ng-click="backlogItemController.toggleChildrenDisplayed()"
    ></div>
</div>
